<template>
  <div class="overview">
    <middle-title title="总体概况"></middle-title>
    <div class="buttonContainer">
      <div
        :class="['bottonbox', selectIndex === index ? 'active' : '']"
        v-for="(item, index) in buttonList"
        :key="index"
        @click="handleClick(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="bottomList">
      <div class="listbox" v-for="(item, key) in activityList" :key="key">
        <span class="label">{{ key }}</span>
        <span class="value">{{ item }}</span>
        <span class="unit">次</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
let buttonList = ref(['当月', '当年'])
let activityList = ref({ 活动数量: 7, 任务数量: 5, 培训数量: 3 })
let selectIndex = ref(0)
const handleClick = (index) => {
  selectIndex.value = index
}
</script>
<style scoped lang="scss">
.overview {
  .buttonContainer {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
    .bottonbox {
      width: 97px;
      height: 34px;
      background: url('@/assets/images/secondpage/button.png') no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      text-align: center;
      line-height: 34px;
      margin-right: 8px;
      &.active {
        width: 97px;
        height: 34.5px;
        background: url('@/assets/images/secondpage/button_active.png') no-repeat;
        background-size: 100% 100%;
        font-weight: bold;
      }
    }
  }
  .bottomList {
    margin-top: 20px;
    .listbox {
      width: 491.5px;
      height: 83px;
      margin-bottom: 10px;
      transform: translateX(15px);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      &:nth-child(1) {
        background: url('@/assets/images/secondpage/list1.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-child(2) {
        background: url('@/assets/images/secondpage/list2.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-child(3) {
        background: url('@/assets/images/secondpage/list3.png') no-repeat;
        background-size: 100% 100%;
      }
      .label {
        font-size: 23px;
        font-weight: bold;
        font-style: italic;
        color: #ffffff;
        margin: 0 65px 0 142px;
      }
      .value {
        font-size: 53px;
        font-family: pmzd;
        font-weight: 400;
        color: #f1f7fe;
        opacity: 0.85;
      }
      .unit {
        font-size: 19px;
        font-style: italic;
        color: #ffffff;
        margin-left: 8px;
      }
    }
  }
}
</style>
